
<script setup>
	
	import port from './lib/port';
	import store from './lib/store';
	import useFunction from './hook/useFunction';
	import { reactive, ref, computed } from 'vue';
	import useCountdown from './hook/useCountdown';
	import c_workitem from './components/workitem.vue';
	import { onLoad, onHide, onShow } from "@dcloudio/uni-app";
	
	
	
	/** 词汇相关共享数据 */
	const storeData = store();
	
	/** 计时器 */
	const countdown = useCountdown();
	
	/** 工具函数 */
	const toolFunction = useFunction();

	/** 词汇列表 */
	const flowlist = ref([]);
	
	/** 参数 */
	const reqdata = reactive({
		page: 1,
		courseId: 0,
		ismore: true,
		pageSize: 50,
		box: storeData.query.box,
		learnId: storeData.query.learnId,
		learnType: storeData.query.learnType
	});

	/** 上一次播放位置 */
	const lastIndex = ref(0);

	/** 播放结束 */
	const playEnd = () => {
		flowlist.value[lastIndex.value].play = false;
		flowlist.value[lastIndex.value].playWord = false;
		flowlist.value[lastIndex.value].blockTranslation = false;
	};

	/** 监听自然结束 */
	uni.useAudio.onEnded(playEnd);

	/** 监听播放暂停 */
	uni.useAudio.onStop(playEnd);

	/** 播放词汇 */
	const playEvent = (item, index) => {
		if (lastIndex.value !== index) playEnd();
		lastIndex.value = index;
		item.play = true;
		uni.useAudio.src(item.voiceFile?.url);
		
		if (!item.playWord) {
			/** 首次点击 */
			item.playWord = true;
			item.blockTranslation = false;
			
		} else {
			/** 二次点击 */
			item.playWord = false;
			item.blockTranslation = true;
		};
	};

	/** 获取词汇列表 */
	async function getlistEvent(){
		if(!reqdata.ismore) return false;
		const { list, perPage, total } = await port.getWordsList_api(reqdata);
		reqdata.page++;
		flowlist.value = [...flowlist.value, ...list];
		if(list.length < perPage) reqdata.ismore = false;
	};
	
	/** 获取课程详情 */
	const getCourseInfo = async () => {
		const { course } = await port.getCourseDetail_api({ id: storeData.query.learnId });
		reqdata.courseId = course?.id;
		
		/** 设置课程 id */
		storeData.setQuery('courseId', course?.id);
		await getlistEvent();
	};
	
	/** 获取数据 */
	getCourseInfo();

	/** 临时数组 */
	const tempArray = ref(new Set());	
	
	/** 临时数组长度 */
	const tempArraySize = computed(() => tempArray.value.size);
	
	/** 正确词汇列表 */
	const rightList = ref([]);
	
	/** 加入选择的词汇 */
	function joinEvent(data, item){
		data = +data;
		if(tempArraySize.value === 45 && data === 2) {
			toolFunction.toast('最大选择45条~');
			return false;
		};
		
		item.change = item.change === data ? 0 : data;
		if(data === 1 || data === 0){
			tempArray.value.has(item.id) && tempArray.value.delete(item.id)
			
		} else tempArray.value.add(item.id);
		
		
		/** 设置学新数据项 */
		storeData.setlistItem('learningNewlist', { id: item.id, right: reqdata.box == 0 ? 2 : 1, type: 2 }, { isAppend: data === 1 });
	};

	/** 自动选择词汇 */
	function handleAutoSelect() {
		if (tempArray.value.size < 45) {
			let count = 0;
			for (const item of flowlist.value) {
				if (tempArray.value.size < 45 && count < 45 && !tempArray.value.has(item.id) && item.change !== 1) {
					joinEvent(2, item);
					count++;
				};
				
				if (count >= 45) break;
			};
			
		} else {
			let count = 0;
			for (const item of flowlist.value) {
				if(item.change === 2) {
					item.change = 0;
					count++;
				};
				
				if (count >= 45) break;
			};
			
			tempArray.value.clear();
		};
	};

	/** 去学习 */
	function handleBegin() {
		playEnd();
		const list = [];
		for (const item of flowlist.value) {
			if(item.change === 2) {
				const newItem = { ...item };
				delete newItem.play;
				delete newItem.playWord;
				delete newItem.blockTranslation;
				list.push(newItem);
			};
		};
		
		/** 设置最小分组 */
		storeData.setShearsBox('mixGroup', 0);
		
		/** 设置选择的词汇列表 */
		storeData.setlist('selectWordlist', list);
		uni.redirectTo({
			url: '/pages/course/word/mark'
		});
	};
	

	/** 进入页面时 */
	onShow(() => {
		countdown.start(() => {
			const words = [];
			for (const item of flowlist.value) {
				if(item.change === 2) {
					const newItem = { ...item };
					delete newItem.play;
					delete newItem.playWord;
					delete newItem.blockTranslation;
					words.push(newItem);
				};
			};
			
			/** 设置最小分组 */
			storeData.setShearsBox('mixGroup', 0);
			
			/** 设置学习后的列表 */
			storeData.setlist('afterStudylist', words);
			uni.redirectTo({
				url: '/pages/course/word/after'
			});
		});
	});
	
	
</script>

<template>
	<view class="containerbox">
		<uv-navbar title="学前检测" placeholder bg-color="#4d6d8a" left-icon="" title-style="color:#fff"/>
		
		<scroll-view scrollY class="containerbox px-30" @scrolltolower="getlistEvent">
			<c_workitem 
				isback
				:item="item" 
				:key="item.id"
				:index="index" 
				v-for="item,index in flowlist"
				@play="playEvent(item, index)"
				@joinEvent="joinEvent($event, item)"
			/>
		</scroll-view>
		
		<view class="flex items-center justify-between bottombox">
			<view class="flex-1 text-26 text-white">已选择<text class="mx-5 text-primary">{{ tempArraySize }}</text>个单词</view>
			<view class="btn bgc-warning" @click="handleAutoSelect">{{ tempArraySize === 45 ? '全部取消' : '自动选择' }}</view>
			<view 
				class="btn bgc-gray" 
				@click="tempArraySize && tempArraySize <= 45 && handleBegin()"
				:class="{ 'bgc-primary': tempArraySize && tempArraySize <= 45 }" 
			>
				开始{{ reqdata.learnType ? '识' : '标' }}记
			</view>
		</view>
		
		<audio />
	</view>
</template>


<style lang="scss" scoped>
	@import "./style/common.scss";
	.btn:last-child{margin-left: 20rpx}
</style>